<!-- 组件html内容 -->
<template>
  <!-- 一定要有一个根标签div class属性值是组件名称 -->
  <div class="Test">
    <!-- 登录大窗体 -->
    <div class="loginDiv">
      <div class="loginDiv_left"></div>
      <div class="loginDiv_right">
        <div class="loginDiv_right_form">
          <el-form ref="loginForm" :rules="loginFormRules" :model="loginFormData" label-width="80px">
            <el-form-item>
              logo
            </el-form-item>
            <el-form-item>
              <h2>社区机构管理后台</h2>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="loginFormData.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userAuthString">
              <el-input v-model="loginFormData.userAuthString" placeholder="请输入密码" prefix-icon="el-icon-lock"
                show-password></el-input>
            </el-form-item>
            <el-form-item prop="reCode">
              <el-input v-model="loginFormData.reCode" placeholder="请输入验证码">
                <img style="width: 120px;" @click="getReCode()" title="点击刷新验证码" slot="append" :src="reCodeBase64" />
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-link @click="dialogState=true" type="primary">没有账号？点击注册</el-link>
            </el-form-item>
            <el-form-item>
              <el-button :loading="loginBtnState" style="width: 100%;" type="primary" @click="doLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 用户注册弹窗 -->
    <el-dialog title="新用户注册" :visible.sync="dialogState" :close-on-click-modal="false" v-if="dialogState" width="50%">

      <!-- 添加、编辑、查看三合一组件 -->
      <AddEditShow @needClose="needClose" :formState="1">
      </AddEditShow>

    </el-dialog>

  </div>
</template>

<!-- 组件js部分 -->
<script>
  import AddEditShow from '@/components/user/addEditShow.vue';

  export default {
    name: 'Test', //组件的名称-要和文件名相同（驼峰规则命名）
    components: { // 注册组件
      AddEditShow
    },
    data() {
      return {
        // 验证码数据
        reCodeBase64: null,
        // 弹窗状态
        dialogState: false,

        // 登录按钮状态
        loginBtnState: false,
        loginFormData: {
          userName: null,
          userAuthString: null,
          reCode: null
        },
        // 表单验证方法
        loginFormRules: {
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          userAuthString: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          reCode: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        }
      }
    },
    mounted() {
      this.getReCode();
    },
    methods: {
      // 点击登录后操作
      doLogin() {

        this.$refs.loginForm.validate((valid) => {
          if (valid) {

            //TODO: 跳转到主页
            // 1. 让按钮loading
            this.loginBtnState = true;
            let _this = this;
            this.$axios.post('/user/doLogin', _this.loginFormData)
              .then(function(res) { // 请求成功 HTTP状态码是200
                // res参数：封装了请求响应、请求参数、请求配置等等信息
                // 后端响应数据：res.data
                console.dir(res.data);
                if (res.data.code == 200) {
                  _this.$message({
                    message: '登录成功，马上跳转到主页...',
                    type: 'success',
                    duration: "3500",
                    onClose: function() { // 当消息提示框关闭时自动调用，this代表的是函数对象
                      _this.$router.push("/main");
                    }
                  });
                }else if(res.data.code == 501){ // 验证码过期
                  _this.getReCode();
                  _this.loginBtnState = false;
                  _this.$message.error(res.data.msg);
                } else {
                  _this.$message.error(res.data.msg);
                  _this.loginBtnState = false;
                }
              })
              .catch(function(error) { // 请求失败处理
                console.log(error);
                _this.loginBtnState = false;
              });


            // 2. 登录成功后跳转到主页 - 路由的跳转





          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 注册弹窗关闭
      needClose() {
        this.dialogState = false;
      },
      // 获取验证码方法
      getReCode() {
        let _this = this;
        this.$axios.get('/user/captcha') // http://localhost:25100/api/user/getUserByID/101
          .then(function(res) { // 请求成功 HTTP状态码是200
            // res参数：封装了请求响应、请求参数、请求配置等等信息
            // 后端响应数据：res.data

            if (res.data.code == 200) {
              _this.reCodeBase64 = res.data.data;
            } else {
              _this.$message.error(res.data.msg);
            }
          })
          .catch(function(error) { // 请求失败处理
            console.log(error);
          });
      }
    },
    watch: {

    }
  }
</script>

<!-- 3.组件的css样式部分 scoped：当前声明的样式只提供给当前组件使用 -->
<style scoped>
  .Test {
    background-color: #0F6FC5;
    /* 高度为浏览器视窗的高度，宽度浏览器视窗的宽度 */
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loginDiv {
    height: 655px;
    width: 1200px;
    background-color: #FFF;
    box-shadow: 0px 1px 13px 15px rgba(0, 0, 0, 0.1);
    display: flex;
  }

  .loginDiv_left {
    width: 820px;
    background-color: aquamarine;
  }

  .loginDiv_right {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loginDiv_right_form {
    width: 90%;
    height: 70%;
  }
</style>
